<template>
	<view class="content">
		<uni-nav-bar statusBar="true" color="#fff" background-color="#366de1" @clickLeft="returnPage">
			<view slot="left">
				<uni-icons type="arrowthinleft" color="#97b4f0" size="24"></uni-icons>
			</view>
			<view class="search-box">
				<uni-icons type="search" color="#fff" size="24"></uni-icons>
				<input type="text" placeholder="大家都在搜“装修”" class="search-input" v-model="keywords" confirm-type="search"
					@confirm="confirm" placeholder-style="color:#fff;" />
				<image src="/static/img/home/search-logo.png" class="search-logo"></image>
			</view>
		</uni-nav-bar>

		<!-- 顶部选项卡 -->
		<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view v-for="(item,index) in tabBars" :key="item.value" class="nav-item"
				:class="{current: index === tabCurrentIndex}" :id="'tab'+index" @click="changeTab(index)">{{item.title}}
			</view>
		</scroll-view>
		<!-- 下拉刷新组件 -->
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="90" @refresh="onPulldownReresh"
			@setEnableScroll="setEnableScroll">
			<!-- 内容部分 -->
			<swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTab">
				<swiper-item v-for="tabItem in tabBars" :key="tabItem.value">
					<scroll-view class="panel-scroll-box" :scroll-y="enableScroll" @scrolltolower="loadMore"
						:scroll-top="scrollTop" @scroll="scroll">
						<!-- 招标信息 -->
						<view v-if="tabShowZb(tabCurrentIndex)">
							<view v-for="(item, index) in tabItem.newsList" :key="index" class="news-item"
								@click="navToDetails(item)">
								<view class="title"><text class="list-badge" v-if="isToday(item.time)"></text><text
										:style="isInArray(clickedid,item.id)?'color:gray':''">{{item.title}}</text>
								</view>
								<view class="infor">{{item.contentText}}</view>
								<view class="bot">
									<view class="bot-text author">
										<image class="type-icon" src="/static/img/home/zb-icon.png"></image>
										{{item.typeStr}}
									</view>
									<view class="bot-text area">
										<image class="type-icon" src="/static/img/home/diqu-icon.png"></image>
										{{item.diqu}}
									</view>
									<view class="bot-text time red">
										<image class="type-icon" src="/static/img/home/time-icon.png"></image>
										{{item.time}}
									</view>
									<!-- 附件 -->
									<view class="bot-text file" v-if="item.fujian==2">
										<image class="type-icon" src="/static/img/home/fujian.png"></image>附件
									</view>
									<!-- 标书 -->
									<view class="bot-text biaoshu" v-if="item.fujian==1">
										<image class="type-icon" src="/static/img/biaoshu.png"></image> 标书
									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<view v-for="(item, index) in tabItem.newsList" :key="index" class="news-item"
								@click="navToDetails(item)">
								<view class="title"><text class="list-badge" v-if="isToday(item.time)"></text><text
										:style="isInArray(clickedid,item.id)?'color:gray':''">{{item.title}}</text>
								</view>
								<view class="xmlist-tag">
									<text class="xmlist-tag-item">{{item.jieduanStr}}</text>
									<text class="xmlist-tag-item xmlist-tag-item-gj">{{item.genjincount}}人跟进</text>
									<text class="xmlist-tag-item">{{item.typeStr}}</text>
								</view>
								<view class="xmlist-bottom">
									<view class="xmlist-area">
										<image src="/static/img/home/tubiao_17.png"></image> <text>{{item.diqu}}</text>
									</view>
									<view class="xmlist-area">
										<image src="/static/img/home/tubiao_19.png"></image> <text>{{item.time}}</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 上滑加载更多组件 -->
						<mix-load-more :status="tabItem.loadMoreStatus"></mix-load-more>
					</scroll-view>
				</swiper-item>
			</swiper>
		</mix-pulldown-refresh>
		<!-- 会员升级 -->
		<view class="shengjiFix" v-if="swiperImg.length>0 && !baseConfig.isIOSshenhe">
			<!-- <image src="/static/img/shengjiImg.png"></image> -->
			<image :src="swiperImg[0].src" @click="goToPage(true, swiperImg[0].type, swiperImg[0].url)"></image>
		</view>
		<!-- 返回顶部 -->
		<view class="backTop" @click="top">
			<image src="/static/img/backtop.png"></image>
		</view>
		<!-- 付费地区 -->
		<!-- <view class="fufeidiqu">
			付费地区
		</view> -->
		<!-- v-model="count" -->
		<view class=""  style="display: none;">
			{{count}}
		</view>
	</view>
</template>

<script>
	//import json from '@/json'
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	import data_newstype from '@/common/static/data-newstype.js';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import commonjs from '@/common/script/common.js';
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	let clicktype = '';
	export default {
		components: {
			mixPulldownRefresh,
			mixLoadMore,
			uniNavBar,
			uniIcons
		},
		data() {
			return {
				count: 0,
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				keywords: '',
				current: 0,
				nexttoken: '',
				tabList: [{
						"value": "9999",
						"title": "全部信息",
						inverted: true
					}, {
						"value": "1",
						"title": "招标公告",
						inverted: false
					}, {
						"value": "8",
						"title": "标书下载",
						inverted: false
					}, {
						"value": "4",
						"title": "中标结果",
						inverted: false
					}, {
						"value": "2",
						"title": "招标预告",
						inverted: true
					},
					{
						"value": "5",
						"title": "采购信息",
						inverted: true
					}, {
						"value": "6",
						"title": "招标变更",
						inverted: true
					}, {
						"value": "12",
						"title": "VIP独家",
						inverted: true
					}, {
						"value": "3",
						"title": "拟在建项目",
						inverted: true
					}, {
						"value": "32",
						"title": "土地挂牌",
						inverted: true
					}, {
						"value": "17",
						"title": "审批公示",
						inverted: true
					}, {
						"value": "0",
						"title": "免费信息",
						inverted: true
					}
				],
				swiperImg: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				clickedid: []
			}
		},
		computed: {},
		async onLoad(options) {
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			if (!options.keysword == undefined && options.keysword != '') {
				this.keywords = options.keysword;
			}
			if (options.type != undefined && options.type != '') {
				this.tabCurrentIndex = parseInt(options.type);
				clicktype = options.type;
			}
			this.loadTabbars();
			this.loadAd();
		},
		onUnload() {
			uni.hideNavigationBarLoading(); //关闭加载动画
		},
		async onReady() {
			if (clicktype != undefined && clicktype != '') {
				let index = parseInt(clicktype);
				//计算宽度相关
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				this.tabCurrentIndex = index;
				//延迟300ms,等待swiper动画结束再修改tabbar
				if (width - nowWidth / 2 > windowWidth / 2) {
					//如果当前项越过中心点，将其放在屏幕中心
					this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
				} else {
					this.scrollLeft = 0;
				}
				//第一次切换tab，动画结束后需要加载数据
				let tabItem = this.tabBars[this.tabCurrentIndex];
				if (!tabItem.loaded) {
					this.loadNewsList('refresh');
					tabItem.loaded = true;
				}
				if (this.tabCurrentIndex == 0 && !tabItem.loaded && clicktype != undefined && clicktype != '' &&
					parseInt(
						clicktype) > 0) {
					this.loadNewsList('refresh');
					tabItem.loaded = true;
				}
				this.changeTab(this.tabCurrentIndex)
			} else {
				this.loadNewsList('refresh');
			}
		},
		methods: {
			gotourl(type, url) {
				if (type == 'tab') {
					uni.switchTab({
						url: url
					})
				} else if (type == 'nav') {
			
					uni.navigateTo({
						url: url
					})
				}
			},
			goToPage(checklogin, type, url) {
				if (url.indexOf('/pages/user/huiyuan/payment') != -1)
					checklogin = true;
				if (checklogin) {
					this.checkLogin();
					if (this.currUser.islogin) {
						this.gotourl(type, url)
					} else {
						url = encodeURIComponent(url);
						uni.navigateTo({
							url: '/pages/user/login/login1?type=' + type + '&fromurl=' + encodeURIComponent(url)
						})
					}
				} else {
					this.gotourl(type, url)
				}
			},
			returnPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取分类
			loadTabbars() {
				let tabList = data_newstype.tabList; // this.tabList;
				tabList.forEach(item => {
					item.newsList = [];
					item.loadMoreStatus = 1; //加载更多 0加载前，1加载中，2没有更多了
					item.loaded = false;
					item.nexttoken = '';
				})
				this.tabBars = tabList;
				//console.log(this.tabBars)
				//this.loadNewsList('add');
			},
			//信息列表
			loadNewsList(type) {
				let tabItem = this.tabBars[this.tabCurrentIndex];
				console.log(tabItem)
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (tabItem.loadMoreStatus === 2) {
						return;
					}
					tabItem.loadMoreStatus = 1;
				} else if (type === 'refresh') {
					this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
					tabItem.loadMoreStatus = 1;
					tabItem.newsList = []; //刷新前清空数组
					tabItem.nexttoken = '';
				}

				//上滑加载 处理状态
				if (!tabItem.loadMoreStatus)
					tabItem.loadMoreStatus = 0;
				else if (type === 'add' && (tabItem.loadMoreStatus == 2 || tabItem.newsList.length > 2000)) {
					tabItem.loadMoreStatus = 2;
					return;
				}
				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 4050;
				data.keywords = this.keywords;
				switch (this.tabCurrentIndex) {
					case 0:
					case 1:
					case 2:
					case 3:
					case 4:
					case 5:
					case 6:
					case 9:
					case 10:
					case 11:
						data.types = tabItem.value;
						data.pagesize = 10;
						if (!tabItem.page)
							tabItem.page = 0;
						tabItem.page++;
						data.page = tabItem.page;
						data.nexttoken = tabItem.nexttoken;
						console.log(JSON.stringify(data))
						uni.request({
							url: this.baseConfig.serverURL + 'zhaobiao/SearchHandler.ashx', //检查更新的服务器地址
							data: data,
							method: "POST",
							header: {
								"content-type": "application/x-www-form-urlencoded" //"application/json"
							},
							success: (res) => {
								uni.hideToast();
								if (res.statusCode == 200) {
									if (!res.data.ret) {
										uni.showToast({
											title: res.data.msg,
											icon: "none"
										});
										uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
										uni.hideNavigationBarLoading();
									} else {
										//获取成功，绑定
										let list = res.data.other2.list;
										list.forEach(item => {
											item.time = item.time.split('T')[0];
											tabItem.newsList.push(item);
										})
										if (tabItem.newsList.length > 0) {
											tabItem.loaded = true;
										}
										tabItem.nexttoken = res.data.other2.nexttoken;
										//this.nexttoken = res.data.other2.nexttoken;
										this.countadd();
										uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
										uni.hideNavigationBarLoading();
										this.tabBars[this.tabCurrentIndex] = tabItem;
									}
								} else {
									uni.showToast({
										title: '获取数据失败！',
										icon: "none"
									});
									uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
									uni.hideNavigationBarLoading();
								}
							},
							fail: (res) => {
								uni.showToast({
									title: '获取数据失败，可能已超时！',
									icon: "none"
								});
							}
						})
						break;
					default:
						data.types = tabItem.value;
						data.pagesize = 10;
						if (!tabItem.page)
							tabItem.page = 0;
						tabItem.page++;
						data.page = tabItem.page;
						data.nexttoken = tabItem.nexttoken;
						console.log(JSON.stringify(data))
						uni.request({
							url: this.baseConfig.serverURL + 'xiangmu/SearchHandler.ashx', //检查更新的服务器地址
							data: data,
							method: "POST",
							header: {
								"content-type": "application/x-www-form-urlencoded" //"application/json"
							},
							success: (res) => {
								uni.hideToast();
								if (res.statusCode == 200) {
									if (!res.data.ret) {
										uni.showToast({
											title: res.data.msg,
											icon: "none"
										});
										uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
										uni.hideNavigationBarLoading();
									} else {
										//获取成功，绑定
										let list = res.data.other2.list;
										list.forEach(item => {
											item.time = item.time.split('T')[0];
											tabItem.newsList.push(item);
										})
										if (tabItem.newsList.length > 0) {
											tabItem.loaded = true;
										}
										tabItem.nexttoken = res.data.other2.nexttoken;
										//this.nexttoken = res.data.other2.nexttoken;
										this.countadd();
										this.tabBars[this.tabCurrentIndex] = tabItem;
										uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
										uni.hideNavigationBarLoading();

									}
								} else {
									uni.showToast({
										title: '获取数据失败！',
										icon: "none"
									});
									uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
									uni.hideNavigationBarLoading();
								}
							},
							fail: (res) => {
								uni.showToast({
									title: '获取数据失败，可能已超时！',
									icon: "none"
								});
							}
						})
						break;
				}
			},
			//新闻详情
			navToDetails(item) {
				this.clickedid.push(item.id);
				let url = "";
				let uri = encodeURIComponent(JSON.stringify(item));
				switch (item.type) {
					case 3:
					case 10:
					case 11:
					case 12:
					case 13:
					case 14:
					case 98:
					case 99:
						if (this.tabCurrentIndex == 0) {
							uni.navigateTo({
								url: '/pages/xiangmu/detail?ly=search&data=' + encodeURIComponent(uri)
							})
						} else {
							uni.navigateTo({
								url: '/pages/xiangmu/detail?ly=list&data=' + encodeURIComponent(uri)
							})
						}
						break;
					default:
						uni.navigateTo({
							url: '/pages/zhaobiao/detail?ly=list&data=' + encodeURIComponent(uri)
						})
						break;
				}
			},

			//下拉刷新
			onPulldownReresh() {
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore() {
				this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},

			//tab切换
			async changeTab(e) {
				if (scrollTimer) {
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof e === 'object') {
					index = e.detail.current
				}
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if (typeof e === 'number') {
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = index;
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					if (typeof e === 'object') {
						this.tabCurrentIndex = index;
					}
					this.tabCurrentIndex = index;
					//第一次切换tab，动画结束后需要加载数据
					let tabItem = this.tabBars[this.tabCurrentIndex];
					if (!tabItem.loaded) {
						this.loadNewsList('refresh');
						//tabItem.loaded = true;
					}
					// if (this.tabCurrentIndex == 0 && !tabItem.loaded && clicktype != undefined && clicktype != '' && parseInt(
					// 		clicktype) > 0) {
					// 	this.loadNewsList('refresh');
					// 	tabItem.loaded = true;
					// }
				}, 300)

			},
			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
			//是否是今天
			isToday(str) {
				return new Date().getTime() - new Date(str).getTime() < 86400000;
			},
			confirm() {
				let keywords = this.keywords
				uni.navigateTo({
					url: '../search/searchList?keysword=' + encodeURIComponent(keywords)
				})
			},
			//显示招标模板
			tabShowZb(tabIndex) {
				switch (tabIndex) {
					case 0:
					case 1:
					case 2:
					case 3:
					case 4:
					case 5:
					case 6:
					case 9:
					case 10:
					case 11:
						//console.log("show:" + tabIndex);
						return true;
					default:
						//console.log("hide:" + tabIndex);
						return false;
				}
			},
			countadd() {
				this.count = this.count + 1;
			},
			loadAd() {
				//异步请求数据
				let data = this.initNewData();
				data.location = 5250;
				uni.request({
					url: this.baseConfig.serverURL + 'Ad/AdBindHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							} else {
								//获取成功，绑定
								let list_gg = res.data.other2.list;
								if (list_gg != undefined && list_gg.length > 0) {
									this.swiperImg = list_gg;
								}
							}
						} else {
							uni.showToast({
								title: '获取失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取失败，可能已超时！',
							icon: "none"
						});
					}

				})
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			top: function() {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0;
				});
			},
			isInArray(arr, value) {
				for (var i = 0; i < arr.length; i++) {
					if (value === arr[i]) {
						return true;
					}
				}
				return false;
			}
		}
	}
</script>

<style lang='scss'>
	@import "@/static/css/commonList.scss";

	page,
	.content {
		background-color: #f2f7fb;
		height: 100%;
		overflow: hidden;
	}

	.search-box {
		background-color: #5987e6;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 0rpx 15rpx;
		border-radius: 10rpx;
		width: 100%;
		height: 40px;

		.search-input {
			font-size: 30rpx;
			color: #fff;
			margin-left: 20rpx;
			width: 100%;
		}

		.search-logo {
			width: 143rpx;
			height: 26rpx;
		}
	}

	/* 顶部tabbar */
	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		background-color: #2f69e0;

		.nav-item {
			display: inline-block;
			width: 150upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			color: #fff;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #fff;
				position: absolute;
				left: 50%;
				bottom: 5px;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #fff;

			&:after {
				width: 50%;
			}
		}
	}

	.swiper-box {
		height: 100%;
	}

	.panel-scroll-box {
		height: 100%;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}

	view {
		/* display: flex;
		flex-direction: column; */
	}

	.news-item {
		position: relative;
		width: 94%;
		padding: 24upx 30upx;
		border-bottom-width: 1px;
		border-color: #eee;
		background-color: #fff;
		box-sizing: border-box;
		margin: 20upx 3% 0;
		border-radius: 20upx;
		.bot{
			justify-content: initial;
			.bot-text{
				margin-right: 10rpx;
				display: flex;
				align-items: center;
			}
		}
	}


	.shengjiFix {
		position: fixed;
		bottom: 100rpx;
		left: 6%;
		z-index: 999;

		image {
			width: 163rpx;
			height: 145rpx;
		}
	}

	.backTop {
		position: fixed;
		bottom: 100rpx;
		right: 6%;
		z-index: 999;

		image {
			width: 94rpx;
			height: 92rpx;
		}
	}

	.fufeidiqu {
		position: fixed;
		bottom: 230rpx;
		right: 6%;
		z-index: 999;
		width: 92rpx;
		padding: 10rpx;
		height: 92rpx;
		border-radius: 92rpx;
		background-color: #fa6551;
		box-sizing: border-box;
		color: #fff;
		box-shadow: 0 0 16rpx rgba($color: #ffbeb7, $alpha: 0.75);
		font-size: 26rpx;
		text-align: center;
		line-height: 35rpx;

	}

	.xmlist-tag {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-top: 20rpx;

		.xmlist-tag-item {
			padding: 10rpx;
			font-size: 24rpx;
			background-color: #eff0f5;
			color: #5f6b93;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.xmlist-tag-item-gj {
			background-color: #eaf2ff;
			color: #306ae0;
		}
	}

	.xmlist-bottom {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		border-top: 1px solid #efefef;
		padding-top: 20rpx;

		.xmlist-area {
			color: #a4a4a4;
			font-size: 26rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-right: 20rpx;

			image {
				width: 40rpx;
				height: 39rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>
